<template>
    <div class="welcome">
        <div class="content">
            <div class="header">数据看板</div>
            <div class="main">
                <div class="first">
                    <div class="yingye">
                        <div class="yingye1">
                            <div>
                                <p style="color:darkgrey">今日营业额</p>
                                <p style="font-size:20px;padding:6px 0px">1200.00</p>
                            </div>
                            <div> <img src="../../assets/red.png" /></div>
                        </div>
                        <div style="color:#2dce89;font-size:15px">
                            <img
                                src="https://www.axured.cn/assets/axurefiles/1e0c038c214e0a4bbd2da32cd44ca920_437/images/%E9%A6%96%E9%A1%B5/u235.svg" />
                            2.00% <span style="color:darkgrey">自昨日以来</span>
                        </div>

                    </div>
                    <div class="yingye">
                        <div class="yingye1">
                            <div>
                                <p style="color:darkgrey">支付订单数</p>
                                <p style="font-size:20px;padding:6px 0px">2</p>
                            </div>
                            <div> <img src="../../assets/yellow.png" /></div>
                        </div>
                        <div style="color:#2dce89;font-size:15px">
                            <img
                                src="https://www.axured.cn/assets/axurefiles/1e0c038c214e0a4bbd2da32cd44ca920_437/images/%E9%A6%96%E9%A1%B5/u235.svg" />
                            3.48% <span style="color:darkgrey">自上个月以来</span>
                        </div>
                    </div>
                    <div class="yingye">
                        <div class="yingye1">
                            <div>
                                <p style="color:darkgrey">新增注册人数</p>
                                <p style="font-size:20px;padding:6px 0px">2</p>
                            </div>
                            <div> <img src="../../assets/green.png" /></div>
                        </div>
                        <div style="color:#2dce89;font-size:15px">
                            <img
                                src="https://www.axured.cn/assets/axurefiles/1e0c038c214e0a4bbd2da32cd44ca920_437/images/%E9%A6%96%E9%A1%B5/u235.svg" />
                            3.56% <span style="color:darkgrey">自上个月以来</span>
                        </div>
                    </div>
                    <div class="yingye">
                        <div class="yingye1">
                            <div>
                                <p style="color:darkgrey">今日访客数</p>
                                <p style="font-size:20px;padding:6px 0px">85</p>
                            </div>
                            <div> <img src="../../assets/blue.png" /></div>
                        </div>
                        <div style="color:#2dce89;font-size:15px">
                            <img
                                src="https://www.axured.cn/assets/axurefiles/1e0c038c214e0a4bbd2da32cd44ca920_437/images/%E9%A6%96%E9%A1%B5/u235.svg" />
                            2.56% <span style="color:darkgrey">自上个月以来</span>
                        </div>
                    </div>
                </div>
                <div class="two">
                    <div class="card">
                        <div style="height:60px;line-height:60px;padding-left:10px">商品支付排行TOP5</div>
                        <el-table :data="tableData" border style="width: 100%,height: 300px">
                            <el-table-column prop="rank" label="排名" width="80" />
                                
                            <el-table-column prop="goods" label="商品" width="280" >
                                <template #default="scope">
                                    <div style="display:flex">
                                    <img style="width:88px;height:52px" :src="scope.row.goods.img"/>
                                     <p >{{ scope.row.goods.title }}</p>
                                    </div>
                                  </template>
                        </el-table-column>
                            <el-table-column prop="number" label="访客数量" />
                            <el-table-column prop="translate" label="转化率" />
                          </el-table>
                   
                    </div>
                    <div class="card">
                        <div style="height:60px;line-height:60px;padding-left:10px">商品访问排行TOP5</div>
                        <el-table :data="tableData1" border style="width: 100%,height: 300px">
                            <el-table-column prop="rank" label="排名" width="80" />
                                
                            <el-table-column prop="goods" label="商品" width="280" >
                                <template #default="scope">
                                    <div style="display:flex">
                                    <img style="width:88px;height:52px" :src="scope.row.goods.img"/>
                                     <p >{{ scope.row.goods.title }}</p>
                                    </div>
                                  </template>
                        </el-table-column>
                            <el-table-column prop="number" label="支付数量" />
                            <el-table-column prop="price" label="支付金额" />
                          </el-table>
                    </div>
                </div>
                <div class="three">
                    <div class="card3">
                        <div class="card4header" style="color:white,,margin-bottom:30px">概况</div>
                        <div class="demo-date-picker">
                            <div class="block1">
                                <el-date-picker v-model="value" type="daterange" start-placeholder="Start date"
                                    end-placeholder="End date" :default-time="defaultTime" />
                            </div>
                        </div>

                        <div ref="main1" style="width: 90%; height: 290px"></div>

                        
                    </div>
                    <div class="card4">
                        <div class="card4header">地域分布</div>
                        <China />

                    </div>
                </div>
                <div class="four">

                    <div class="four1">
                        <div class="card4header" style="color:white">概况</div>
                        <div class="demo-date-picker">
                            <div class="block">
                                <el-date-picker v-model="value" type="daterange" start-placeholder="Start date"
                                    end-placeholder="End date" :default-time="defaultTime" />
                            </div>
                        </div>

                        <div ref="main" style="width: 100%; height: 400px"></div>
                    </div>

                </div>
            </div>


        </div>


    </div>
</template>

<script setup>
import China from './china.vue'
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";


const value = ref('')
const defaultTime = ref < [Date, Date] > ([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
const main1 = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
    () => {
        init(),
        init1()
    }
)
function init() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main.value, 'dark');
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '视频播放量/时长'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '0:00']
        },
        yAxis: {
            type: 'value'
        },
        backgroundColor: "rgb(51,102,153)",
        series: [


            {
                name: 'Email',
                type: 'line',
                //   stack: 'Total',
                data: [0, 45, 300, 134, 90, 500, 0, 890, 80]
            },
            {
                name: 'Union Ads',
                type: 'line',
                //   stack: 'Total',
                data: [256, 1, 191, 67, 750, 330, 1000, 34, 100]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

const tableData1 = [
  {
    rank: 1,
    goods: {img:"https://img14.360buyimg.com/n7/jfs/t1/44927/20/22716/33580/6443dcafF95dee491/29f980f7a617f6f1.jpg",title:"Apple iPhone 14 Pro Max (A2896) 256GB暗紫色 支持移动联通电信5G 双卡双待手"},
    number: 565,
    price:34567
  } , {
    rank: 2,
    goods: {img:"https://img14.360buyimg.com/jdcms/s130x130_jfs/t14398/281/1003456109/468475/47d67fc0/5a40bc04N11d15e7d.jpg!q80.webp",title:"澳牧儿童成长牛奶礼盒 春节送礼年货礼盒 高端全脂纯进口牛"},
    number: 115,
    price:34567
  },  {
    rank: 3,
    goods: {img:"https://gw.alicdn.com/bao/uploaded/i2/2210860372997/O1CN01cIt6IZ1Y0fmCB6Xj1_!!0-item_pic.jpg_300x300q90.jpg",title:"康佳筋膜枪肌肉按摩器放松仪迷你肌膜枪十大品牌"},
    number: 15,
    price:34567
  },  {
    rank: 4,
    goods: {img:"https://gw.alicdn.com/bao/uploaded/i2/2213387966/O1CN01TYx6k028iTnqOjb9O_!!0-item_pic.jpg_300x300q90.jpg",title:"Bejirog/北极绒水洗棉夏凉被空调被"},
    number: 15,
    price:34567
  },  {
    rank: 5,
    goods: {img:"https://gw.alicdn.com/bao/uploaded/i4/2047238097/O1CN01v1y5b129gTlmkz1KR_!!0-item_pic.jpg_300x300q90.jpg",title:"[官方推荐]手持小风扇便携式随身小型迷你充电"},
    number: 15,
    price:34567
  },
]
const tableData = [
  {
    rank: 1,
    goods: {img:"https://img14.360buyimg.com/n7/jfs/t1/44927/20/22716/33580/6443dcafF95dee491/29f980f7a617f6f1.jpg",title:"Apple iPhone 14 Pro Max (A2896) 256GB暗紫色 支持移动联通电信5G 双卡双待手"},
    number: 565,
    translate:'56%'
  } , {
    rank: 2,
    goods: {img:"https://img14.360buyimg.com/jdcms/s130x130_jfs/t14398/281/1003456109/468475/47d67fc0/5a40bc04N11d15e7d.jpg!q80.webp",title:"澳牧儿童成长牛奶礼盒 春节送礼年货礼盒 高端全脂纯进口牛"},
    number: 115,
    translate:'56%'
  },  {
    rank: 3,
    goods: {img:"https://gw.alicdn.com/bao/uploaded/i2/2210860372997/O1CN01cIt6IZ1Y0fmCB6Xj1_!!0-item_pic.jpg_300x300q90.jpg",title:"康佳筋膜枪肌肉按摩器放松仪迷你肌膜枪十大品牌"},
    number: 15,
    translate:'56%'
  },  {
    rank: 4,
    goods: {img:"https://gw.alicdn.com/bao/uploaded/i2/2213387966/O1CN01TYx6k028iTnqOjb9O_!!0-item_pic.jpg_300x300q90.jpg",title:"Bejirog/北极绒水洗棉夏凉被空调被"},
    number: 15,
    translate:'56%'
  },  {
    rank: 5,
    goods: {img:"https://gw.alicdn.com/bao/uploaded/i4/2047238097/O1CN01v1y5b129gTlmkz1KR_!!0-item_pic.jpg_300x300q90.jpg",title:"[官方推荐]手持小风扇便携式随身小型迷你充电"},
    number: 15,
    translate:'56%'
  },
]
function init1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(main1.value);
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '视频播放量/时长'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '0:00']
        },
        yAxis: {
            type: 'value'
        },
        backgroundColor: "rgb(51,102,153)",
        series: [


            {
                name: 'Email',
                type: 'line',
                //   stack: 'Total',
                data: [0, 45, 300, 134, 90, 500, 0, 890, 80]
            },
            {
                name: 'Union Ads',
                type: 'line',
                //   stack: 'Total',
                data: [256, 1, 191, 67, 750, 330, 1000, 34, 100]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

</script>
<style scoped>
.welcome {
    width: 100%;
    background: linear-gradient(to bottom, #3778ff 0%, #3778ff 17%, #f3f3f5 17%, #f1f2f3 100%);
}

.content {
    padding: 0px 100px;
    overflow: hidden;
    width: 1050px;
    margin: 0 auto;

    height: 100%;
}
.el-table__cell {
    height: 100px ;
}
.header {
    height: 80px;
    line-height: 80px;
    color: white;

    font-weight: 600;
}

.main {

    display: flex;
    flex-direction: column;

}

.first {
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}


.first .yingye {
    padding: 20px;
    width: 19.3%;
    height: 80px;
    background: white;
    border-radius: 10px;
    box-shadow: #acacad 0px 0px 15px;
}

.yingye1 {
    justify-content: space-between;
    display: flex;
}

.two {
    width: 100%;
    height: 490px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;
}

.two .card {
    width: 48.6%;
    background: white;
    border-radius: 10px;
    box-shadow: #acacad 0px 0px 15px;
}

.three {
    width: 100%;
    height: 401px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 28px;

}

.card3 {
    width: 59.6%;
    height: 100%;
    background: white;
    border-radius: 10px;
    box-shadow: #acacad 0px 0px 15px;
}

.card4 {
    width: 38%;
    text-align: right;
    height: 100%;
    background: white;
    border-radius: 10px;
    box-shadow: #acacad 0px 0px 15px;
}

.card4header {
    height: 50px;
    color: #acacad;
    font-size: 18px;
    line-height: 50px;
    padding-left: 20px;
    text-align: left;
}

.four {
    width: 100%;
    height: 465px;
    position: relative;

}
.card3 {

    position: relative;

}
.card3{
    background: rgb(51, 102, 153);

}
.four1 {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: rgb(51, 102, 153);
    box-shadow: #acacad 0px 0px 15px;

}

.block {
    position: absolute;
    top: -20px;
    right: 30px;
}
.block1 {
    position: absolute;
    top: 20px;
    right: 30px;
}
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}</style>